<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%-- ${fn:length(list)} --%>
<link rel="stylesheet" href="my.css">
<script type="text/javascript" src='jquery-1.7.2.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	var flag = false;
	$("#mem_id").keyup(function(){
		$.ajax({
			type:"post",
			url:"member.do",
			data:"command=checkId&mem_id="+$("#mem_id").val(),
			dataType:"json",
			success:function(jsonData){
				var span;
				if(jsonData.checkId==false){
					flag = false;
					span="사용가능한 아이디입니다.";
					$("#checkId").val("true");
				}else{
					span="사용중인 아이디입니다";
					flag = true;
					$("#checkId").val("false");
				}
				$("#idCheck").html(span);
			}
		});//ajax
	});//keyup
		$("#join").click(function(){
			if($("#mem_id").val()==""){
				alert("아이디를 입력하세요!");
				$("#mem_id").focus();
				return false;
			}else if($("#password").val()==""){
				alert("비밀번호를 입력하세요!");
				$("#password").focus();
				return false;
			}else if($("#passCheck").val()==""){
				alert("비밀번호를 확인하세요!");
				$("#passCheck").focus();
				return false;
			}else if($("#password").val()!=$("#passCheck").val()){
				alert("비밀번호를 다시 입력하세요!");
				$("#password").val("");
				$("#passCheck").val("");
				$("#password").focus();
				return false;
			}else if($("#mem_name").val()==""){
				alert("이름을 입력하세요!");
				$("#mem_name").focus();
				return false;
			}else if(flag){
				alert("아이디를 디시 입력하세요!");
				$("#mem_id").val("");
				$("#mem_id").focus();
				return false;
			}
				$("#joinForm").submit();
		});//click
	});//ready
</script>
<div id="container">
	<div id="index_header"></div>
	<div id="index_main">
	<a href="index.jsp">HOME</a><br>
	<a><embed src="img/member/register.swf" wmode="transparent" height="100px"></a>
 	<!-- ↓↓↓↓ 여기서 코딩 ↓↓↓↓↓↓↓↓↓ -->
<input type="hidden" name="checkId" id="checkId" value="false">
<form id="joinForm" name="joinForm" action="member.do" method="post">
<input type="hidden" name="command" value="register">
	<table align="center" class="regTable">
		<tr>
			<td>
				<img height="33px" width="100px" alt="id" src="img/member/id.png">
			</td>
			<td>
				&nbsp;<input type="text" name="mem_id" id="mem_id" maxlength="25">
			</td>
			<td>
				<img width="100px" alt="id" src="img/member/idCheck.png">
			</td>
			<td width="150px">
				<span id=idCheck></span>
			</td>
		</tr>
		<tr>
			<td>
				<img width="100px" alt="password" src="img/member/password.png">
			</td>
			<td>
				&nbsp;<input type="password" name="password" id="password" maxlength="25">
			</td>
		</tr>
		<tr>
			<td>
				<img width="100px" alt="passCheck" src="img/member/passCheck.png">
			</td>
			<td>
				&nbsp;<input type="password" name="passCheck" id="passCheck" maxlength="25" >
			</td>
		</tr>
		<tr>
			<td>
				<img height="33pxs" width="100px" alt="name" src="img/member/name.png">
			</td>
			<td>
				&nbsp;<input type="text" name="mem_name" id="mem_name" maxlength="25">
			</td>
		</tr>
		<tr>
			<td colspan="3" align="right">
				<input type="button" value="회원가입" name="join" id="join">
			</td>
		</tr>
	</table>	
</form>

	<!-- ↑↑↑↑  여기서 코딩↑↑↑↑↑↑↑↑↑ -->	
	</div>
	</div>